  <template>
  <div id="FormDialog">
    <el-row>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne">
          <div class="always_hander"></div>
          <div class="always_title">专家信息管理</div>
        </div>
      </el-col>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne1">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  基本信息
                </div>
              </template>
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                ::size="medium"
                label-width="120px"
                style="display: flex; justify-content: flex-start"
              >
                <el-form-item label="姓名" prop="exName">
                  <el-input
                    v-model="form.exName"
                    :disabled="isLook"
                    placeholder="请输入姓名"
                    :size="medium"
                  />
                </el-form-item>
                <el-form-item label="专业" prop="exProfe">
                  <el-input
                    v-model="form.exProfe"
                    :disabled="isLook"
                    :size="medium"
                    placeholder="请输入专业"
                  />
                </el-form-item>
                <el-form-item label="毕业院校" prop="exUniversity">
                  <el-input
                    v-model="form.exUniversity"
                    :disabled="isLook"
                    :size="medium"
                    placeholder="请输入毕业院校"
                  />
                </el-form-item>
                <el-form-item label="身份证" prop="exIdcard">
                  <el-input
                    v-model="form.exIdcard"
                    :disabled="isLook"
                    :size="medium"
                    placeholder="请输入身份证"
                    maxlength="18"
                  />
                </el-form-item>
                <el-form-item label="年龄" prop="exAge">
                  <el-input
                    v-model="form.exAge"
                    :size="medium"
                    placeholder="请输入年龄"
                    :disabled="true"
                  />
                </el-form-item>
                <el-form-item label="性别" prop="exSex">
                  <el-select
                    v-model="form.exSex"
                    :disabled="isLook"
                    placeholder="请选择性别"
                    style="width: 100%"
                    :size="medium"
                  >
                    <el-option
                      v-for="dict in dict.type.sys_user_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="exPhone">
                  <el-input
                    v-model="form.exPhone"
                    :disabled="isLook"
                    :size="medium"
                    placeholder="请输入手机号"
                    onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"
                  />
                </el-form-item>
                <el-form-item label="邮箱" prop="exEmail">
                  <el-input
                    v-model="form.exEmail"
                    :disabled="isLook"
                    placeholder="请输入邮箱"
                    :size="medium"
                  />
                </el-form-item>
                <el-form-item label="区域" prop="exRegion">
                  <el-input
                    v-model="form.exRegion"
                    :disabled="isLook"
                    placeholder="请输入区域"
                    :size="medium"
                  />
                </el-form-item>
                <el-form-item label="等级" prop="exGrade">
                  <el-input
                    v-model="form.exGrade"
                    :disabled="isLook"
                    placeholder="请输入等级"
                    :size="medium"
                  />
                </el-form-item>
                <el-form-item label="工作单位" prop="exUnti">
                  <el-input
                    v-model="form.exUnti"
                    :disabled="isLook"
                    placeholder="请输入工作单位"
                    :size="medium"
                  />
                </el-form-item>
                <el-form-item label="岗位" prop="exUnti">
                  <el-input
                    v-model="form.exUnti"
                    :disabled="isLook"
                    placeholder="请输入岗位"
                    :size="medium"
                  />
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item name="2">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="证书信息" name="first">
                  <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="日期">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="项目经历" name="second"
                  >配置管理</el-tab-pane
                >
                <el-tab-pane label="卡号信息" name="third"
                  >角色管理</el-tab-pane
                >
                <el-tab-pane label="评价" name="fourth"
                  >定时任务补偿</el-tab-pane
                >
              </el-tabs>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
export default {
  name: "Add",
  dicts: ["sys_user_sex"],
  data() {
    // 身份证号校验
    var checkIdNum = (rule, value, callback) => {
      const reg =
        /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
      var org_gender = value.substring(16, 17);
      var sex = org_gender % 2 == 1 ? "男" : "女";
      let myDate = new Date();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      let age = 0;
      age = myDate.getFullYear() - value.substring(6, 10) - 1;
      console.log("---value---", age);
      console.log(this);
      // debugger;
      if (!value) {
        return callback(new Error("证件号码不能为空"));
      } else if (!reg.test(value)) {
        return callback(new Error("证件号码不正确"));
      } else {
        callback();
      }

      this.form.exSex = sex;
      this.form.exAge = age;
      console.log(this.form);
    };
    var checkPhone = (rule, value, callback) => {
      const pattern = /^1[3456789]\d{9}$/;
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      } else if (!pattern.test(value)) {
        return callback(new Error("手机号码不正确"));
      } else {
        callback();
      }
    };
    const checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      } else if (!mailReg.test(value)) {
        callback(new Error("请输入正确的邮箱格式"));
      } else {
        callback();
      }
    };
    return {
      // 输入框的size
      medium: "medium",
      activeNames: ["1", "2"],
      activeName: "first",
      isLook:false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 表单参数
      form: {
        exSex: "",
        exAge: "",
      },
      // 表单校验
      rules: {
        ID: [{ required: true, message: "不能为空", trigger: "blur" }],
        exName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        exIdcard: [
          { required: true, message: "身份证不能为空", trigger: "blur" },
          {
            validator: checkIdNum,
            trigger: "blur",
          },
        ],
        exAge: [{ required: true, message: "年龄不能为空", trigger: "blur" }],
        exPhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        exEmail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        exProfe: [
          { required: true, message: "专业不能为空", trigger: "blur" },
        ],
        exSex: [
          {
            required: true,
            message: "性别；男：1，女：2不能为空",
            trigger: "change",
          },
        ],
        exRegion: [{ required: true, message: "区域不能为空", trigger: "blur" }],
        exGrade: [{ required: true, message: "等级不能为空", trigger: "blur" }],
        exUnti: [{ required: true, message: "单位不能为空", trigger: "blur" }],
        exUniversity: [
          { required: true, message: "毕业院校不能为空", trigger: "blur" },
        ],
        RETIRE: [
          {
            required: true,
            message: "是否退休；退休：1，未退休：2不能为空",
            trigger: "blur",
          },
        ],
        updateBy: [
          { required: true, message: "更新人不能为空", trigger: "blur" },
        ],
        updateTime: [
          { required: true, message: "更新时间不能为空", trigger: "blur" },
        ],
        createBy: [
          { required: true, message: "创建人不能为空", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        exName: undefined,
        exIdcard: undefined,
        exAge: undefined,
        exPhone: undefined,
        exEmail: undefined,
        exProfe: undefined,
        exSex: undefined,
        exRegion: undefined,
        exGrade: undefined,
        exUnti: undefined,
        exUniversity: undefined,
        RETIRE: undefined,
        updateBy: undefined,
        updateTime: undefined,
        createBy: undefined,
        createTime: undefined,
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.$route.query.row)
    this.form = this.$route.query.row.data
    if(this.form.exSex == '1'){
      this.form.exSex ='男'
    }else{
      this.form.exSex ='女'
    }
    if (this.$route.query.saleslead == 1){
      this.isLook = true;
    }
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 表单重置
    reset() {
      this.form = {
        ID: undefined,
        exName: undefined,
        exIdcard: undefined,
        exAge: undefined,
        exPhone: undefined,
        exEmail: undefined,
        PROFESSION: undefined,
        exSex: undefined,
        exRegion: undefined,
        exGrade: undefined,
        exUnti: undefined,
        UNIVERSITY: undefined,
        RETIRE: undefined,
        updateBy: undefined,
        updateTime: undefined,
        createBy: undefined,
        createTime: undefined,
      };
      this.resetForm("form");
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.el_col {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.card-container {
  height: 80%; /* 设置容器的高度为 100% */
  display: flex;
  flex-direction: column;
}
.card-item {
  flex: 1; /* 平分容器的宽度 */
}
#FormDialog {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
// .dialog-footer1 {
//   width: 100%;
//   height: 6vh;
//   background: #ffffff;
//   text-align: center;
//   line-height: 6vh;
// }
.el-card {
  margin-top: 10px;
}
.el-select {
  width: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.el-form-item {
  width: 30%;
  margin-bottom: 16px !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-form-item {
  margin-bottom: 11px;
}
.el-table {
  min-height: 50% !important;
}
.always_handerOne {
  height: 80px;
  background-color: #ffffff;
  // border-radius: 14px;
}
.always_handerOne1 {
  height: auto;
  background-color: #ffffff;
  // border-radius: 14px;
  padding: 20px;
}
.always_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
  margin-left: 30px;
}
.always_title1 {
  font-size: 18px;
  font-weight: bold;
  // line-height: 53px;
  margin-left: 15px;
  position: relative;
}
.always_title1 ::before {
  content: "|";
  flex-shrink: 0;
  width: 4px;
  height: 6%;
  margin-left: 12px;
  // background: #f90;
  color: #f90;
  position: absolute;
  left: -22px;
  margin-bottom: 12px;
}
.always_hander {
  background: url(../../../assets/images/header0.png);
  height: 20px;
  width: 100%;
}
// .margin_col {
//   margin-bottom: 20px;
// }
.el_formContent .el-form-item {
  width: 50%;
  margin-bottom: 17px;
}
.el-table--mini .el-table__cell {
  padding: 10px 0 !important;
}

</style>
  